<?php
// 获取船舶详细信息
$ship = $pdo->prepare("
    SELECT s.*, p.name_zh AS port_name, c.name_zh AS company_name
    FROM ships s
    LEFT JOIN ports p ON s.current_port_id = p.id
    LEFT JOIN companies c ON s.company_id = c.id
    WHERE s.id = ?
")->execute([$_GET['ship_id']])->fetch();

// 获取历史记录
$history = $pdo->prepare("
    SELECT * FROM ship_history 
    WHERE ship_id = ? 
    ORDER BY event_time DESC
    LIMIT 50
")->execute([$_GET['ship_id']])->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
    <title><?= $ship['name_zh'] ?> - 船舶档案</title>
    <style>
        .ship-profile {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
        }

        .timeline {
            position: relative;
            padding-left: 2rem;
            margin-top: 2rem;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 6px;
            top: 0;
            height: 100%;
            width: 2px;
            background: #e0e0e0;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 2rem;
            padding-left: 2rem;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -4px;
            top: 5px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--primary-blue);
            border: 3px solid white;
            box-shadow: 0 0 0 2px var(--primary-blue);
        }
    </style>
</head>
<body>
<div class="container ship-profile">
    <!-- 左侧信息 -->
    <div class="left-panel">
        <!-- 基本信息 -->
        <div class="info-card">
            <h3 class="border-bottom pb-2">船舶画像</h3>
            <div class="row">
                <div class="col-md-6">
                    <p>中文名称：<?= $ship['name_zh'] ?></p>
                    <p>英文名称：<?= $ship['name_en'] ?></p>
                </div>
                <div class="col-md-6">
                    <p>IMO：<?= $ship['imo_number'] ?></p>
                    <p>MMSI：<?= $ship['mmsi_number'] ?></p>
                </div>
            </div>
            <div class="text-center my-3">✯━━━━━━━━━━✯</div>
            <p>所属公司：<?= $ship['company_name'] ?? '未知' ?></p>
            <p>当前港口：<?= $ship['port_name'] ?? '公海航行' ?></p>
        </div>

        <!-- 时间轴 -->
        <div class="timeline">
            <?php foreach ($history as $event): ?>
                <div class="timeline-item">
                    <div class="card">
                        <div class="card-body">
                            <small class="text-muted">
                                <?= date('Y-m-d H:i', strtotime($event['event_time'])) ?>
                            </small>
                            <?php switch($event['event_type']):
                                case 'name_change': ?>
                                    <p>名称变更：<?= $event['details']->old_name ?> → <?= $event['details']->new_name ?></p>
                                    <?php break; ?>

                                <?php case 'port_call': ?>
                                    <p>停靠 <?= $event['details']->port_name ?>
                                        历时 <?= $event['details']->duration ?>分钟</p>
                                    <?php break; ?>

                                <?php case 'violation': ?>
                                    <p class="text-danger">违规记录：<?= $event['details']->description ?></p>
                                <?php endswitch; ?>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- 右侧导航 -->
    <div class="right-panel">
        <div class="nav-buttons sticky-top">
            <a href="#" class="btn btn-outline-primary d-block mb-3">锚地预警信息</a>
            <a href="#" class="btn btn-outline-primary d-block mb-3">综合数据研判</a>
            <a href="#" class="btn btn-outline-primary d-block mb-3">船员详细信息</a>
            <a href="#" class="btn btn-outline-primary d-block mb-3">航行数据统计</a>
        </div>
    </div>
</div>
</body>
</html>